開啟模擬器，會看到 React Native 已經幫我們建立了一個簡單的教學頁面，讓我們可以點擊連結，進入教學頁面跟著學習。不過整個程式碼架構對初學者來說應該太複雜了，因此讓我們把所有程式註解起來，重新建立一個簡單的內容：

import React from 'react';
import {SafeAreaView, View, Text} from 'react-native';

function App() {
  return (
    <SafeAreaView>
      <View>
        <Text>Hello World</Text>
      </View>
    </SafeAreaView>
  );
}

export default App;

Tips ：你可以透過 rfce + enter 指令來快速生成一個 React 元件，再將裡頭的 div 改掉。元件記得要以大寫開頭命名！

現在我們來瀏覽一下上面的程式碼。我們建造了一個名為 App 的元件，並在最下方輸出他，好讓他能被其他地方引入與使用。

為那些沒使用過 React 的人特別說明一下，上述的程式碼寫法屬於 Functional Component ，會用 function 加上大寫開頭的元件名稱撰寫。

很久以前， React 曾經有 Class Component 和 Functional Component 兩種元件的寫法同時並行，用在不一樣的地方。但後來發展出 Hooks 後， Functional Component 能做的事變多了，和以前需要搭配 Class Component 使用的定位也不相同。為了避免造成新手混淆，也為了能使用 Hooks ，後面我會統一使用 Functional Component 撰寫程式碼。

再來，要渲染到畫面上的內容則會放進 return () 當中， return() 裡最外面只能放一個根元件，也就是說你不能這樣寫：

return (
  <SafeAreaView>
    <View>
      <Text>Hello World</Text>
    </View>
  </SafeAreaView>
  <SafeAreaView>
    <View>
      <Text>Hello World</Text>
    </View>
  </SafeAreaView>
);

但根元件裡要包幾個都沒關係：

return (
  <SafeAreaView>
    <View>
      <Text>Hello World</Text>
    </View>
    <View>
      <Text>Hello World</Text>
    </View>
  </SafeAreaView>
);

這是因為 React 使用 JSX 這個語法糖來模擬，讓寫 JS 如同在寫 HTML 一樣，而 JSX 最後依然必須被轉換成 JS 才會正確渲染在畫面上。雖然 React 會幫我們做轉換的動作，但是因為轉換時， JSX 節點會對應到 JS 函數，如果給他好幾個根節點，會難以對應到正確的項目，因此 React 會主動報錯。

回到 React Native 。為了讓我們能用 JS 來寫 App ，我們是透過 React Native 已經幫我們寫好的元件來達成那些本來要用原生語法達成的事。這些元件包含 SafeAreaView 、 View 、 Text 等，需要在最上方 import 才行。

import {SafeAreaView, View, Text } from 'react-native';

此外還要記得，所有標籤都必須被正確關閉，否則會報錯：Parsing error: Expected corresponding JSX closing tag for <Text>

{/* 正確 */}
<Text>123</Text>
{/* 錯誤 */}
<Text>123

View 用起來類似 div ，而 Text 則是用來包覆文字的。要注意的是，在 HTML 寫到文字時，即使不包覆 <p> 啊 <h1> 等等，也不會怎樣，還是能正確顯示。但是在寫 React Native 時，一定要記得包覆在 <Text> 中。

SafeAreaView 會根據不同裝置調整內部渲染的內容。像有些 iPhone 有瀏海，如果用 View 包覆可能導致部分內容被瀏海遮住，使用 SafeAreaView 就可以避免這樣的問題。

現在你已經了解一個基本的 React Native 元件要如何撰寫，你可以試著調整裡頭的文字，玩玩看。